<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router';
import {computed, ref, reactive} from 'vue';
import {jStorage} from 'jzutil';
const router = useRouter();
const route = useRoute();
const tableData = ref([
    {
        id: 1,
        name: '22',
        source: '12,23,123,123',
        count: 4,
        createTime: '2021-01-01 10:12:32'
    }
]);
const columns: any[] = [
    {
        label: '名称',
        key: 'name'
    },
    {
        label: '缩略图',
        key: 'imgs'
    },
    {
        label: '创建时间',
        key: 'createTime'
    }
];
const cardTitle = ref('');
const cardName = ref('');
const contentHtml = ref('');
const editor = ref(null);
const cardList = ref<any[]>([]);
const addType = ref('card');
const addModal = ref(false);
const handleAdd = (type: string) => {
    addType.value = type;
    addModal.value = true;
    //@ts-ignore
    const KindEditor = window.KindEditor;
    setTimeout(() => {
        KindEditor.ready(function (K: any) {
            editor.value = K.create('textarea[name="content"]', {
                resizeType: 0,
                width: '100%',
                height: '300px',
                allowPreviewEmoticons: false,
                allowImageUpload: false,
                items: [
                    'fontsize',
                    '|',
                    'forecolor',
                    'hilitecolor',
                    'bold',
                    'italic',
                    'underline',
                    '|',
                    'justifyleft',
                    'justifycenter',
                    'justifyright',
                    'insertorderedlist',
                    'insertunorderedlist',
                    '|',
                    'emoticons',
                    'image',
                    'link'
                ]
            });
        });
    }, 200);
};
const modalTitle = computed(() => {
    const temp: any = {
        card: '卡片',
        callus: '联系我们'
    };
    return `新增${temp[addType.value]}`;
});

const submitAdd = () => {
    // cardList.value.push();
    const obj = {
        title: cardTitle.value,
        name: cardName.value,
        //@ts-ignore
        content: editor.value.html()
    };
    const temp = jStorage.getLocal('card') || [];
    temp.push(obj);
    jStorage.setLocal('card', temp);

    setTimeout(() => {
        cardList.value = temp;
        //@ts-ignore
        editor.value.html('');
        cardTitle.value = '';
        cardName.value = '';
        addModal.value = false;
    }, 800);
};
(() => {
    cardList.value = jStorage.getLocal('card') || [];
})();
</script>
<template>
    <el-container class="card-view">
        <div class="card-item">
            <el-button @click="handleAdd('card')">新增卡片</el-button>

            <!-- <el-button @click="handleAdd('callus')">新增联系我们</el-button> -->
        </div>
        <div class="card-item" v-for="(item, index) in cardList" :key="index.toString()">
            <div class="card-item-name">卡片名称： {{ item.name }}</div>
            <h2 v-if="item.title">{{ item.title }}</h2>
            <div :innerHTML="item.content" class="card-item-content"></div>
        </div>
        <el-dialog :title="modalTitle" v-model="addModal" width="40%">
            <el-input v-model="cardName">
                <template #prepend>名称</template>
            </el-input>
            <el-input v-model="cardTitle">
                <template #prepend>标题</template>
            </el-input>
            <textarea id="editor_id" name="content"></textarea>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addModal = false">取 消</el-button>
                    <el-button type="primary" @click="submitAdd">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </el-container>
</template>
<style scoped lang="less">
ol {
    list-style: auto !important;
}
.card-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0 30px 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.card-item {
    width: 350px;
    border: 1px solid #f1f1f1;
    box-shadow: 0 0 10px 4px #f1f1f1;
    border-radius: 10px;
    margin: 20px;
    padding: 20px;
    height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    p {
        color: green;
    }
}
.card-item-name {
    position: absolute;
    top: 0;
    width: 100%;
    height: 20px;
}
.card-item:nth-child(1) {
    border: 0 none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-height: 200px;
    .el-button {
        margin: 10px;
    }
}
.card-item-content {
    padding: 20px;
}
</style>
